<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>

		<script src="/assets/libs/echarts.min.js"></script>
		<!-- <script  src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> -->
		<script src="https://www.amaoee.cn/assets/js/vue.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
		<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
		<style>
			.content-wrap {
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 15px;
			}

			.second-box {
				margin-top: 15px;
				margin-left: 10px;
			}

			.second-border {
				display: inline-block;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
			}

			.second-box .second-item {
				padding: 8px 10px;
				display: inline-block;
				cursor: pointer;

			}

			.second-box .second-item.active {
				color: #18bc9c;
			}

			.third-box {
				margin-top: 15px;
				margin-left: 10px;
			}

			.third-border {
				display: inline-block;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
			}

			.third-box .third-item {
				padding: 8px 10px;
				display: inline-block;
				cursor: pointer;

			}

			.third-box .third-item.active {
				color: #18bc9c;
			}

			.third-txt {
				float: right;
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin-right: 48px;
				margin-top: 10px;
				/* margin-top: -20px; */
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			a {
				color: #FFFFFF;
			}

			a:hover {
				color: #FFFFFF;
			}

			.first-box {}

			.first-item {
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin: 10px 10px 0 10px;
				border: 1px solid #EEEEEE;
				background-color: #FFFFFF;
				color: #333;
			}

			.first-box .second-item {
				float: right;
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin: 10px 0px 0 10px;
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.first-item.active {
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.item-top {
				display: flex;
			}

			.item-info {
				font-size: 18px;
				margin: 15px 0 0 30px;
			}

			.item-info:first-child {
				margin-left: 10px;
			}

			.item-bg {
				width: 95%;
				margin: 50px auto;
				overflow-x: auto;
			}

			table {
				width: 95%;
				margin: 50px auto;
				text-align: center;
			}

			th,
			td {
				text-align: center;
				height: 50px;

			}

			.item-check {
				width: 20px;
				height: 20px;
				border-radius: 5px;
				background-color: #BBBBBB;
				margin: 0 auto;
			}

			.item-title {
				position: fixed;
				width: 150px;
				height: 50px;
				background-color: rgba(0, 0, 0, 0.8);
				top: 50%;
				left: 50%;
				text-align: center;
				line-height: 50px;
				color: #FFFFFF;
				transform: translate(-50%, -50%);
			}

			.item-input {
				position: fixed;
				width: 400px;
				height: 200px;
				background-color: rgba(0, 0, 0, 0.6);
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #FFFFFF;
				text-align: center;
			}

			.input-flie {
				width: 300px;
				height: 100px;
				/* padding-left: 30px; */
				background-color: #FFFFFF;
				color: #000000;
				font-size: 16px;
				/* margin-top: 20px; */
				padding: 30px;
				margin-top: 30px;
			}

			.input-btn {
				color: #000000;
				margin-top: 20px;
			}

			.item-word {
				position: fixed;
				width: 50%;
				height: 80%;
				left: 50%;
				top: 50%;
				background-color: #FFFFFF;
				border: #000000 1px solid;
				transform: translate(-50%, -50%);
				z-index: 111;
				min-width: 900px;
				overflow-y: auto;
			}

			.item-text {
				font-size: 15px;
				padding: 10px;
				border: 1px solid #000000;
				width: 200px;
				height: 200px;
				text-align: center;
				overflow-x: auto;
				display: none;
			}

			.item-area {
				width: 300%;
				height: 400px;
				/* margin-right: 20px; */
				margin-top: 20px;
				border: 1rpx solid;
				margin-left: 30px;
			}

			.el-radio__label {
				font-size: 17px;
				padding-left: 10px;
			}
		</style>

	</head>
	<body>
		<div class="content-wrap" id="app">
			<div class="item-box">
				<div class="item-top">
					<div class="item-info">
						客户编号：{$user_info.id}
					</div>
					<div class="item-info">
						用户名：{$user_info.nickname}
					</div>
					<div class="item-info">
						手机号：{$user_info.mobile}
					</div>
					<div class="item-info">
						性别：{$user_info.gender}
					</div>
				</div>
			</div>
			<div class="item-title" v-if="title">{{title_txt}}</div>
			<div class="first-box" v-if="user_status==0">
				<div class="first-item" :class="{active:index==current}" v-for="(item,index) in info"><span
						@click="getlist(item,index)"> {{item.name}}</span></div>
				<span class="second-item" v-if="itemList.length>0" style="margin-right: 300px;"
					@click="goout()">导出</span>
				<span class="second-item" v-if="son_list.length>0&&son_current!=-1" @click="goInput()">导入</span>
			</div>
			<div class="item-input" v-if="item_input && user_status==0">
				<input class="input-flie" type="file" name="photo" id="photo" value="" style="margin-left: 55px">
				<input class="input-btn" type="button" @click="postData();" value="上传" name=""
					style="width:60px;height:26px;">
				<input class="input-btn" type="button" @click="getnone()" value="取消" name=""
					style="width:60px;height:26px;margin-left: 35px">
			</div>
			<div class="second-box" v-if="son_list.length>0 && user_status==0">
				<div class="second-border">
					<span class="second-item" :class="{active:index==son_current}" v-for="(item,index) in son_list"
						@click="getclass(item.id,index)">{{item.name}}</span>
				</div>
			</div>
			<div class="third-box" v-if="sson_list.length>0 && user_status==0">
				<div class="third-border">
					<span class="third-item" :class="{active:index==sson_current}" v-for="(item,index) in sson_list"
						@click="getsheet(item,index)">{{item.name}}</span>
				</div>
			</div>
			<div class="third-box" v-if="sheetlist!='' && user_status==0">
				<div class="third-border">
					<span class="third-item" :class="{active:index==sheet_current}" v-for="(item,index) in sheetlist"
						@click="getdetail(topicid,item.sheet,index,item.remark)">{{item.remark}}</span>
				</div>
			</div>
			<div class="third-txt" v-if="itemList.length>0 && user_status==0">
				<a href="{$url}/TyQEOGLsfv.php/user/user/compare/ids/{$user_info.id}">报告对比分析</a>
			</div>
			<div class="item-bg" v-if="itemListTitle.length>0 && user_status==0">
				<table border="" cellspacing="" cellpadding="">
					<tr>
						<th style="width: 50px; min-width: 50px;">
							<!--							<input type="checkbox" name="" id="" :checked="check1" value="" @click="changeCheck()" />-->
						</th>
						<th v-for="(item,index) in itemListTitle" style="min-width: 150px;">{{item.attr_name}}</th>
						<!-- <th style="width: 50px; min-width: 50px;">操作</th> -->
					</tr>

					<tr v-for="(item, index) in itemList">
						<td>
							<input type="checkbox" name="" id="" value="" :checked="check" @click="getExport(item)" />
						</td>
						<td v-for="(items, indexs) in item">

							<div style="width: 100px;outline: none;margin: 0 auto;" class="" contenteditable="input"
								@click="getid(items.id)" @blur="handleInput">
								{{items.attr_value}}
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div>
				<div class="second-box" v-if="message_info!='' && user_status==1">
					<div class="second-border">
						<span class="second-item">{{message_info.name}}</span>
					</div>
				</div>
				<div class="third-box" v-if="message_info!=''  && user_status==1">
					<div class="third-border">
						<span class="third-item" :class="{active:index==message_current}"
							v-for="(item,index) in message_info.sheet_list"
							@click="getdetail(message_id,item.sheet,index,item.remark)">{{item.remark}}</span>
					</div>
				</div>
				<div class="item-bg" v-if="itemListTitle.length>0 && user_status==1">
					<table border="" cellspacing="" cellpadding="">
						<tr>
							<th v-for="(item,index) in itemListTitle" style="min-width: 150px;">{{item.attr_name}}</th>

						</tr>
						<tr v-for="(item, index) in itemList">
							<td v-for="(items, indexs) in item">
								{{items.attr_value}}
							</td>
						</tr>
					</table>
				</div>
				<div v-loading.fullscreen.lock="fullscreenLoading">
					<!-- 指令方式 -->
				</div>
				<div id="item-pic" style="width:510px;height: 400px;display: none;">
				</div>
			</div>
			<div class="" style="padding: 30px;" v-if="itemListTitle.length>0">
				<el-radio v-model="radio" label="1">折线图</el-radio>
				<el-radio v-model="radio" label="2">柱状图</el-radio>
			</div>
			<div id="" v-if="itemListTitle.length>0">
				<input type="button" style="margin-left: 50px;width: 100rpx;height: 30px;" value="生成图表"
					@click="goImg()">
			</div>

			<div class="item-word" v-if="imgShow==true">
				<div class="" style="">
					<div class="word" style="margin: 0 auto;">
						<div class="" style="" v-for="(item,index) in imgData" :key="index">
							<img width="510" height="400" style="margin:10px 0 10px 20px" :src="item">
						</div>
					</div>
				</div>
				<input type="button" style="margin-left: 50px;width: 100rpx;height: 30px;margin-bottom: 30px;"
					value="导出word" @click="goWord()">
				<input type="button" style="margin-left: 50px;width: 100rpx;height: 30px;margin-bottom: 30px;"
					value="关闭" @click="getFalse()">
			</div>
		</div>
		<script type="text/javascript" src="/assets/libs/jquery/dist/FileSaver.js"></script>
		<script type="text/javascript" src="/assets/libs/jquery/dist/jquery.wordexport.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					id: '',
					check: false,
					check1: false,
					content: '',
					info: {},
					current: -1,
					son_current: -1,
					sson_current: -1,
					sheet_current: -1,
					son_list: [],
					sson_list: [],
					sheetlist: {},
					topicid: '',
					itemList: [],
					itemListTitle: [],
					kind: [],
					name: '',
					sheet: '',
					item: [],
					data: '',
					item_kind: [],
					title: false,
					title_txt: '导出成功',
					flag: 0,
					admin_id: "{$admin_id}",
					user_id: "{$user_info.id}",
					item_input: false,
					class_id: '',
					user_status: "{$type}",
					message_id: "{$message_id}",
					message_info: '',
					message_current: -1,
					visible: false,
					vis_title: "上传成功",
					fullscreenLoading: false,
					option: '',
					xData: [],
					yData: [],
					imgData: [],
					textarea: '',
					imgShow: false,
					array: [],
					nameData: [],
					typeLine: 'line',
					radio: '1',
					titleName:''

				},
				created() {
					this.init();
					this.getOneData()
				},
				onload() {},
				methods: {
					getFalse() {
						this.imgShow = false
					},
					goWord() {
						$(".word").wordExport('生成word文档');
						this.imgData=[]
					},
					getTExt() {
						console.log(this.textarea)
					},
					goImg() {
						if (this.radio == 1) {
							this.yData.forEach((item) => {
								item.type = 'line'
							})

						} else {
							this.yData.forEach((item) => {
								item.type = 'bar'
							})
						}
						console.log(this.radio, this.typeLine)
						//this.imgData = []
						var chartDom = document.getElementById('item-pic');
						var myChart = echarts.init(chartDom);
						var option = {
							animation: false,
							grid: { // 控制图的大小，调整下面这些值就可以，
								x: 50, //控制x轴文字与底部的距离
								y2: 200 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
							},
							title: {
								text: this.titleName
							},
							xAxis: {
								type: 'category',
								axisLabel: {
									interval: 0, //强制文字产生间隔
									rotate: 45, //文字逆时针旋转45°
									textStyle: { //文字样式
										color: "black",
										fontSize: 14,
										fontFamily: 'Microsoft YaHei'
									}
								},

								data: this.xData
							},
							legend: {
								data: this.nameData
							},
							yAxis: {
								type: 'value'
							},
							series: this.yData
							// series: [{
							// 	data: this.yData,
							// 	type: 'bar'
							// }]
						};
						console.log(option)
						option && myChart.setOption(option);

						let imgSrc = myChart.getDataURL({
							type: 'jpeg', //png | jpeg
							pixelRatio: 1,
							backgroundColor: '#fff' //背景色白色
						});
						// console.log(imgSrc)
						this.imgData.push(imgSrc)
						this.imgShow = true
					},
					goexport() {
						$(".word").wordExport('生成word文档');
					},
					openFullScreen1() {
						this.fullscreenLoading = true;
						setTimeout(() => {
							this.fullscreenLoading = false;
						}, 2000);
					},
					getOneData() {
						$.ajax({
							url: '{$url}/api/health_classify/getOneTopic',
							/*接口域名地址*/
							type: 'post',
							data: {
								id: this.message_id
							},
							dataType: 'json',
							success: (res) => {
								if (res.code == 1) {
									this.message_info = res.data
								}
							}
						})
					},
					getnone() {
						this.item_input = false
					},
					saveinfo() {

					},
					goCompare() {
						"{{:url('user/user/compare')}}"
					},
					postData() {
						this.fullscreenLoading = true;
						var formData = new FormData();
						formData.append("file", $("#photo")[0].files[0]);
						formData.append("user_id", this.user_id);
						formData.append("class_id", this.class_id);
						formData.append("service", 'App.Passion.UploadFile');
						console.log(formData.append("file", $("#photo")[0].files[0]))

						$.ajax({
							url: '{$url}/index.php/api/health_classify/data_import',
							/*接口域名地址*/
							type: 'post',
							data: formData,
							contentType: false,
							processData: false,
							success: function(res) {
								console.log("success")
								console.log(res)
								if (res.code == 1) {
									window.alert('上传成功')
									window.location.reload()
								}
								if (res.code == 0) {
									window.alert(res.msg)
									window.location.reload()
								}
							},
							fail: function(err) {
								console.log("err")
								console.log(err)
							}
						})
					},
					goInput() {
						this.item_input = true
					},
					getExport(item) {
						if (this.item_kind.indexOf(item) == -1) {
							this.item_kind.push(item);
						} else {
							const num = this.item_kind.indexOf(item);
							this.item_kind.splice(num, 1);
						}
						console.log(this.item_kind)
					},
					goout() {
						this.kind = []
						this.item = []
						if (this.flag == 1) {
							return false;
						}
						if (this.item_kind.length == 0 && this.check == false) {
							this.flag = 1
							console.log(this.flag)
							this.title_txt = '请选择数据再导出'
							this.title = true
							var timer = setInterval(() => {
								this.title = false
								this.flag = 0
								clearInterval(timer)
							}, 1000);
							return;
						} else if (this.item_kind.length > 0) {
							this.item_kind.forEach(item => {
								item.forEach((items, index) => {
									if (index == 1) {
										var kind_attr = items.attr_value
										var kind_id = items.id
										var kind_data = {}
										kind_data.id = kind_id
										kind_data.attr_value = kind_attr
										this.kind.push(kind_data)
									} else if (index == 2) {
										var item_attr = items.attr_value
										var item_id = items.id
										var item_data = {}
										item_data.id = item_id
										item_data.attr_value = item_attr
										this.item.push(item_data)
									}
								})
							})
							var _kind = JSON.stringify(this.kind)
							var _item = JSON.stringify(this.item)
							$.ajax({
								type: 'POST',
								url: "{$url}/index.php/api/health_classify/exportToUser",
								data: {
									kind: _kind,
									name: this.name,
									sheet: this.sheet,
									item: _item,
									user_id: this.user_id,
									admin_id: this.admin_id,
									topic_id: this.topicid,
									content: '',
									type: 1
								},
								dataType: 'json',
								success: (res) => {
									if (this.flag == 1) {
										return;
									}
									this.flag = 1
									this.title_txt = '导出成功'
									this.title = true
									var timer = setInterval(() => {
										clearInterval(timer)
										this.title = false
										this.flag = 0

									}, 1000);
									return;
								}
							})
						} else if (this.check == true) {
							this.itemList.forEach(item => {
								item.forEach((items, index) => {
									if (index == 1) {
										var kind_attr = items.attr_value
										var kind_id = items.id
										var kind_data = {}
										kind_data.id = kind_id
										kind_data.attr_value = kind_attr
										this.kind.push(kind_data)
									} else if (index == 2) {
										var item_attr = items.attr_value
										var item_id = items.id
										var item_data = {}
										item_data.id = item_id
										item_data.attr_value = item_attr
										this.item.push(item_data)
									}
								})
							})
							var _kind = JSON.stringify(this.kind)
							var _item = JSON.stringify(this.item)
							$.ajax({
								type: 'POST',
								url: "{$url}/index.php/api/health_classify/exportToUser",
								data: {
									kind: _kind,
									name: this.name,
									sheet: this.sheet,
									item: _item,
									user_id: this.user_id,
									admin_id: this.admin_id,
									content: '',
									type: 1
								},
								dataType: 'json',
								success: (res) => {
									if (this.flag == 1) {
										return;
									}
									this.flag = 1
									this.title_txt = '导出成功'
									this.title = true
									var timer = setInterval(() => {
										clearInterval(timer)
										this.title = false
										this.flag = 0

									}, 1000);
									return;
								}
							})
						}

					},
					changeCheck() {
						this.check = !this.check
					},
					handleInput($event) {
						this.content = $event.target.innerText;
						console.log(this.id, this.content)
						$.ajax({
							type: 'POST',
							url: "{$url}/index.php/api/health_classify/editItem",
							data: {
								id: this.id,
								item: this.content
							},
							dataType: 'json',
							success: (res) => {

							}
						})
						// 拓展 如果想要只需要前100位数据
						//this.content = this.content.substring(0,100)
					},
					getid(id) {
						this.id = id
					},
					init() {
						$.ajax({
							type: 'POST',
							url: "{$url}/index.php/api/health_classify/classify",
							data: {},
							dataType: 'json',
							success: (res) => {
								if (res.code == 1) {
									this.info = res.data;
								}
							}
						})
					},
					getlist(item, index) {
						console.log("getlist")
						this.son_current = -1
						this.sson_current = -1
						this.sson_list = []
						this.current = index
						this.son_list = item.son_list
						this.sheetlist = []
						this.itemListTitle = []
						this.itemList = []
					},
					getclass(id, index) {
						this.son_current = index
						this.sson_list = []
						this.sheetlist = []
						this.itemListTitle = []
						this.itemList = []
						this.class_id = id
						$.ajax({
							type: 'POST',
							url: "{$url}/index.php/api/health_classify/getTopicList",
							data: {
								class_id: id.toString(),
								user_id: this.user_id,

							},
							dataType: 'json',
							success: (res) => {
								if (res.code == 1) {
									this.sson_list = res.data
									this.sheetlist = []
								}
							}
						})
					},
					getsheet(item, index) {
						//console.log(item.name)
						this.name = item.name
						this.sson_current = index
						this.topicid = item.id
						this.sheetlist = item.sheet_list
						this.itemListTitle = []
						this.itemList = []
					},
					getdetail(topicid, sheetid, index, sheet) {
						this.titleName=sheet
						console.log(sheet)
						this.check = false
						this.item_kind = []
						this.kind = []
						this.item = []
						this.sheet = sheet
						this.itemListTitle = []
						this.itemList = []
						this.sheet_current = index
						this.message_current = index

						const info = {
							topic_id: topicid,
							sheetid: sheetid,
							classid: this.class_id,
							user_id: this.user_id
						};
						sessionStorage.setItem('info', JSON.stringify(info));
						var topicid = topicid.toString()
						var sheet = sheetid.toString()
						$.ajax({
							type: 'POST',
							url: "{$url}/index.php/api/health_classify/getKindItem",
							data: {
								topic_id: topicid,
								sheet: sheetid,
								user_id: this.user_id,
							},
							dataType: 'json',
							success: (res) => {
								if (res.code == 1) {
									this.itemListTitle = res.data.title
									this.itemList = res.data.content
									console.log(this.itemList)
									console.log(this.itemListTitle)
									this.xData = []
									this.yData = []
									var nameData = []
									this.itemListTitle.forEach((item, index) => {
										if (index > 1) {
											nameData.push(item.attr_name)
										}
									})
									this.nameData = nameData
									this.itemList.forEach((item, index) => {
										this.xData.push(item[1].attr_value)
									})
									//var array=[]
									nameData.forEach((item, index) => {
										this.array[index] = {
											"name": item,
											"data": [],
											'type': this.typeLine
										}
										this.itemList.forEach((items, indexs) => {
											//console.log(items[index + 2].attr_value)
											if (isNaN(parseInt(items[index + 2]
													.attr_value))) {
												var ynum = 0
												this.array[index].data.push(ynum)
											} else {
												this.array[index].data.push(parseInt(items[
													index + 2].attr_value))
											}

										})
										//console.log(this.array)
									})
									this.yData = this.array
								}
							}
						})
					}
				},
			})
		</script>
	</body>
</html>
